import React from 'react';
import { Table, Button } from 'antd';
import { PlanTableProps } from '../types';
import styles from './index.less';

const PlanTable: React.FC<PlanTableProps> = ({ planDetails, loading }) => {
  // 表格列定义
  const columns = [
    {
      title: '所属团队',
      dataIndex: 'team',
      key: 'team',
    },
    {
      title: '重要业务系统',
      dataIndex: 'systemName',
      key: 'systemName',
    },
    {
      title: '本期是否申报投产规划',
      dataIndex: 'isReported',
      key: 'isReported',
    },
    {
      title: '投产联系人',
      dataIndex: 'contactPerson',
      key: 'contactPerson',
      render: (contactPerson: any) => (
        <span>
          {contactPerson.name}/{contactPerson.code}
          <span className={styles['avatar']}>联</span>
        </span>
      ),
    },
    {
      title: '填报负责人',
      dataIndex: 'responsiblePerson',
      key: 'responsiblePerson',
      render: (responsiblePerson: any) => (
        <span>
          {responsiblePerson.name}/{responsiblePerson.code}
          <span className={styles['avatar']}>联</span>
        </span>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      key: 'action',
      render: () => <Button type="link" className={styles['action-btn']}>查看</Button>,
    },
  ];

  return (
    <div className={styles['table-section']}>
      <div className={styles['section-title']}>
        投产规划内容（以下展示最新投产规划内容）
        <Button className={styles['export-btn']}>导出</Button>
      </div>
      
      <div className={styles['table-container']}>
        <Table 
          columns={columns} 
          dataSource={planDetails.map((item, index) => ({ ...item, key: index }))}
          pagination={false}
          loading={loading}
          bordered
        />
      </div>
    </div>
  );
};

export default PlanTable; 